
<template>
  <div id="up">
    <el-dialog width="960px" :visible.sync="isShown" title="选择图片">
      <div class="content">
        <div class="content-left">
          <ul v-loading="categoryLoad" class="content-left-list nui-scroll">
            <li
              @click="getImage(v,i)"
              :class="picCategoryCurrent==i?'liCur':''"
              v-for="(v,i) in picCategory"
              :key
            >
              <div>
                <svg style="font-size:18px" class="icon" aria-hidden="true">
                  <use xlink:href="#iconlunbotu" />
                </svg>
                <span>{{v.name}}</span>
              </div>
              <span @click.stop="deleteCategory(v.id)" v-if="v.id>0">删除</span>
            </li>
          </ul>
          <el-popover placement="top" width="200" v-model="addCategoryStatus">
            <el-input size="small" v-model="addCategoryName" placeholder="请输入分组名字"></el-input>
            <div style="text-align: right; margin: 10px 0 0 0 ">
              <el-button size="mini" type="text" @click="cancel">取消</el-button>
              <el-button
                :loading="addCategoryLoad"
                type="primary"
                size="mini"
                @click="addCategory"
              >确定</el-button>
            </div>
            <el-button size="small" slot="reference" plain>新增分组</el-button>
          </el-popover>
        </div>
        <div class="content-right">
          <div class="content-right-top">
            <div>
              <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="keywords"></el-input>
            </div>
            <div>
              <el-button class="up-image" size="small" type="primary">
                上传图片
                <input
                  @change="uploadImageUrl"
                  ref="filesss"
                  class="files"
                  type="file"
                  id="files"
                />
              </el-button>
              <el-button class="up-image" size="small" type="primary">
                上传视频
                <input
                  @change="uploadImageUrl2"
                  ref="filesss"
                  class="files"
                  type="file"
                  id="filesVideo"
                />
              </el-button>
            </div>
          </div>
          <ul v-loading="imageLoad" class="content-right-center nui-scroll">
            <li @click="replaceImage(v.url)" v-for="(v,i) in picList" :key="i">
              <span v-if="v.fileType=='2'" class="playbg">
                 <video :src="v.url"  style="width: 110px;height: 110px"></video>
                 <span class="yuan zdyyuan"></span>
                  <span class="yuan2 el-icon-caret-right"  style="font-size:28px"></span>
              </span>
              <el-image style="width: 110px; height: 110px" :src="v.url" fit="cover" v-else></el-image>
              <svg
                @click.stop="deletePicture(v.id)"
                style="font-size:20px"
                class="icon delete"
                aria-hidden="true"
              >
                <use xlink:href="#iconshanchu" />
              </svg>
            </li>
          </ul>
          <div class="content-right-bottom">
            <el-pagination
              @current-change="fy"
              :current-page="currentPage"
              background
              :page-size="30"
              layout="prev, pager, next"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategory,
  getPicture,
  saveCategory,
  delPicture,
  delCategory,
  uploadImage,
  uploadVideo,
} from "../../api/api";
import qs from "qs";
export default {
  name: "up",
  data() {
    return {
      keywords: "",
      isShown: false,
      picCategory: [],
      picCategoryCurrent: 0,
      picList: [],
      currentPage: 1,
      category: 0, //默认获取全部分组的图片
      total: 10,
      categoryLoad: false,
      imageLoad: false,
      addCategoryStatus: false,
      addCategoryName: "",
      addCategoryLoad: false,
    };
  },
  watch: {
    keywords() {
      this.getPicNumber();
    },
  },
  methods: {
    //获取图片分类
    getCategory() {
      this.categoryLoad = true;
      var params = {
        storeId: "",
      };
      getCategory(params).then((res) => {
        this.categoryLoad = false;
        if (res.data.code == 1) {
          res.data.data.unshift({ name: "全部" });
          this.picCategory = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取图片数量
    getPicNumber() {
      this.imageLoad = true;
      var params = {
        page: this.currentPage,
        category: this.category,
        keywords: this.keywords,
        storeId: "",
      };
      getPicture(params).then((res) => {
        this.imageLoad = false;
        if (res.data.code == 1) {
          this.picList = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //分组点击事件
    getImage(v, i) {
      this.picCategoryCurrent = i;
      this.category = v.id;
      this.currentPage = 1;
      this.getPicNumber();
    },
    //分页
    fy(currentPage) {
      this.currentPage = currentPage;
      this.getPicNumber();
    },
    //替换图片
    replaceImage(v) {
      this.$emit("getImage", v);
      this.isShown = false;
    },
    //取消
    cancel() {
      this.addCategoryStatus = false;
      this.addCategoryName = "";
      this.addCategoryLoad = false;
    },
    //新增分组
    addCategory() {
      if (this.addCategoryName == "") {
        this.$message.error("分组名称不能为空");
        return false;
      }
      this.addCategoryLoad = true;
      var params = {
        name: this.addCategoryName,
        storeId: "",
      };
      saveCategory(qs.stringify(params)).then((res) => {
        this.addCategoryLoad = false;
        if (res.data.code == 1) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.addCategoryStatus = false;
          this.getCategory();
        } else {
          this.$message.error(res.data.msg);
        }
        // console.log(res.data);
      });
    },
    //删除分组
    deleteCategory(id) {
      this.categoryLoad = true;
      var params = {
        id: id,
      };
      delCategory(qs.stringify(params)).then((res) => {
        this.categoryLoad = false;
        if (res.data.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getCategory();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //删除图片
    deletePicture(id) {
      this.imageLoad = true;
      var params = {
        id: id,
      };
      delPicture(qs.stringify(params)).then((res) => {
        this.imageLoad = false;
        if (res.data.code == 1) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getPicNumber();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //上传图片
    uploadImageUrl(event) {
      var $file = event.currentTarget;
      var formData = new FormData();
      formData.append("file", $file.files[0]);
      formData.append("category", this.category);
      formData.append("storeId", "");
      uploadImage(formData).then((res) => {
        if (res.data.code == 1) {
          this.getPicNumber();
        }
      });
    },
    uploadImageUrl2(event) {
      var $file = event.currentTarget;
      var formData = new FormData();
      formData.append("file", $file.files[0]);
      // formData.append("category", 'video');
      // formData.append("storeId", "");
      uploadVideo(formData).then((res) => {
        if (res.data.code == 1) {
          this.getPicNumber();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/base.less");
.content {
  border: 1px solid #eee;
  display: flex;
  justify-content: center;
  > .content-left {
    width: 25%;
    border-right: 2px solid #eee;
    padding: 20px 0;
    text-align: center;
    .content-left-list {
      height: 400px;
      padding: 0 20px;
      overflow-y: scroll;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
      > .liCur {
        color: @mainColor;
      }
      > li:nth-of-type(1) {
        > span {
          display: none;
        }
      }
      > li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        cursor: pointer;
        > div {
          span {
            margin-left: 10px;
          }
        }
      }
    }
  }
  > .content-right {
    width: 75%;
    padding: 20px 0;
    .content-right-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
    }
    .content-right-center {
      padding: 5px 20px;
      height: 298px;
      overflow-y: scroll;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      > li:hover {
        > .delete {
          display: block;
        }
      }
      > li {
        margin: 0 10px 10px 0;
        position: relative;
        padding: 5px;
        > .delete {
          position: absolute;
          right: -4px;
          top: -4px;
          display: none;
        }
      }
      > li:nth-of-type(5n) {
        margin-right: 0;
      }
    }
    .content-right-bottom {
      border-top: 1px solid #eee;
      margin-top: 20px;
      padding-top: 20px;
      text-align: center;
    }
  }
}
.up-image {
  position: relative;
  overflow: hidden;
  .files {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    opacity: 0;
  }
}
.playbg{
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  .yuan {
    display: inline-block;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #000;
    opacity: .6;
    position: absolute;
    top: 41px;
    left: 42px;
  }
  .yuan2{
    position: absolute;
    top: 43px;
    left: 43px;
    color: #fff;
    opacity: .5;
  }
}
</style>
